<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

</head>

<body>
  <div id="app">
      <hr>
      1.基础demo
      <!-- 单向绑定只是获取data中的数据，来进行展示，你修改，并不会影响data中的值！ -->
      单向绑定：<input type="text" :value="message"><br>
      <!-- 双向绑定不仅仅可以获取data中的数据，来展示，你修改，也会让data中的值发生变化！ -->
      双向绑定：<input type="text" v-model="message">
      <br>
      单向绑定升级为双向绑定：<input type="text" :value="message" @input="changeValue"><br>
      vue的data数据：{{message}}
      <hr>
      <br>
      2.文本 通常用于表单点击 新建/添加 的时候！
      <input type="text" v-model="msg">
      {{msg}}
      <hr>
      <br>
      3.多行文本 通常用于表单点击 新建/添加 的时候！
      <textarea v-model="textarea" cols="30" rows="10"></textarea>
      {{textarea}}
      <hr>
      <br>
      4.复选框
      <input type="checkbox" v-model="checked">
      {{checked}}
      <input type="checkbox" v-model="checked1">
      {{checked1}}
      <input type="checkbox" v-model="checked2">
      {{checked2}}
      <br>
      全选功能： <input type="checkbox" v-model="checkedAll" @change="checkedAllfun">
      {{checkedAll}}
      <hr>
      <br>
      5.单选
      <input type="radio" name="sex" v-model="choise" value="man">男
      <input type="radio" name="sex" v-model="choise" value="girl">女
      <input type="radio" name="sex" v-model="choise" value="you">未知
      {{choise}}
      <hr>
      <br>
      6.下拉列表
      <select v-model="kaoshi[0].selected">
          <option value="" disabled>请选择</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
      </select>
      <select v-model="kaoshi[1].selected">
          <option value="" disabled>请选择</option>
          <option value="A">A</option>
          <option value="B">B</option>
          <option value="C">C</option>
      </select>
      {{kaoshi}}
  </div>
  <script>
      let vm = new Vue({
          el: "#app",
          data() {
              return {
                  message: "abc",
                  msg:"",
                  textarea:`
                   多行字符串的符号
                   我还能换行！
                  `,
                  checked:false,
                  checked1:false,
                  checked2:false,
                  checkedAll:false,
                  choise:"",
                  kaoshi:[
                      {selected:""},
                      {selected:""}
                  ]
                  
              }
          },
          methods: {
              //手动模拟v-model的方法
              changeValue(e) {
                  //获取input事件对应的输入框的值，然后去修改data中的message！
                  this.message = e.target.value;
              },
              checkedAllfun(){
                      this.checked = this.checkedAll;
                      this.checked1 = this.checkedAll;
                      this.checked2 = this.checkedAll;
              }
          },
      });
  </script>
</body>

</html>